<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="header"
        ><div class="create-user"
          ><button class="btn add" @click="addDialog = true">新增客户</button></div
        >
        <div class="search"
          ><label>查询条件</label
          ><el-select v-model="value" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" /> </el-select
          ><el-select v-model="value" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" />
          </el-select>
          <el-input v-model.trim="input" placeholder="检索" class="input-with-select">
            <template #prepend>
              <el-select v-model="select" class="w100" placeholder="选择">
                <el-option label="工单编号" value="1" />
                <el-option label="工单编号" value="2" />
                <el-option label="工单编号" value="3" />
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" />
            </template> </el-input></div
      ></div>
      <div class="table">
        <el-table border stripe resizable :data="tableData" style="width: 100%">
          <el-table-column show-overflow-tooltip prop="date" label="客户识别码" min-width="200" />
          <el-table-column show-overflow-tooltip prop="name" label="等级" width="120" />
          <el-table-column show-overflow-tooltip prop="state" label="客户名称" width="300" />
          <el-table-column show-overflow-tooltip prop="city" label="绑定手机" width="150" />
          <el-table-column show-overflow-tooltip prop="city" label="产品" width="120" />
          <el-table-column show-overflow-tooltip prop="city" label="工单" width="120" />
          <el-table-column show-overflow-tooltip prop="city" label="注册时间" width="150" />
          <el-table-column show-overflow-tooltip prop="city" label="最后登陆" width="150" />
          <el-table-column show-overflow-tooltip prop="state" label="绑定微信" width="120" />
          <el-table-column show-overflow-tooltip fixed="right" label="操作" width="140">
            <template #default>
              <div class="btns">
                <button class="btn-table change">改密</button>
                <button class="btn-table edit">编辑</button>
                <button class="btn-table detail">详细</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="pagina"> <Pagination /></div>
      </div>

      <!-- 新增用户弹窗 -->
      <el-dialog
        v-model="addDialog"
        title="快速新增客户"
        width="30%"
        :draggable="true"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        class="add-dialog"
        top="8vh"
      >
        <div class="cards">
          <div class="card">
            <label>客户名称</label>
            <el-input v-model.trim="input" class="input-w" />
          </div>
          <div class="card">
            <label>绑定手机</label>
            <el-input v-model.trim="input" class="input-w" />
          </div>
          <div class="card">
            <label>网点通知</label>
            <div class="checkeds">
              <el-checkbox v-model="checked" label="短信" />
            </div>
          </div>
          <p>向客户手机号发送短信，并附带6位数字密码</p>
        </div>
        <div class="btns">
          <button class="btn save" @click="addDialog = false">保存</button>
          <button class="btn cancel" @click="addDialog = false">取消</button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.customer.customerCreate,
  })

  const value = ref('')
  const input = ref('')
  const select = ref('')
  const checked = ref(true)
  const addDialog = ref(true)
  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]
  const tableData = [
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: '广西壮族自治区-百色市-隆林各族自治县--东门东街道18号',
      tag: 'Home',
    },
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]
</script>

<style scoped lang="scss">
  @import './index';
</style>
